<template>
  <page-layout title="系统简介" class="pageLayout">
    <div slot="headerContent" class="headerContent">
      <div class="header">
        <H1><b>短串联重复序列（short tandem repeats, STR）</b></H1>
      </div>
      <b class="header"
        >存在于人类基因组DNA中的一类具有长度多态性的DNA序列，由2-6个碱基的重复单位串联构成，是目前法医物证鉴定中应用最广泛的遗传标记</b
      >
      <b class="header">
        是法医物证学混合DNA分析和个人识别的主导手段，混合DNA图谱分析是法医物证领域的难点和热点，研究人员通过对混合图谱中STR数据的分析，根据峰面积，峰高以及等位基因频率等信息
      </b>
      <b class="header">
        利用概率统计学的知识构建拆分算法，分析推断出混合样本的多个供体基因型，再利用似然比检验LR提供法庭认可的证据，协助警方破案，从而提高案件侦破的效率
      </b>
    </div>
    <template slot="extra">
      <div class="extraImg">
        <img :src="extraImage" />
      </div>
    </template>
    <div>
      <div class="textStyle">
        &nbsp;&nbsp;国外用于混合DNA图谱分析的软件有STRmix，EuroForMix等，国内也引进了图谱分析软件为了进一步的研究学习。但是，此类系统普遍具有以下特点:<br />
        <li>权限设置，不支持外部人员对数据的访问</li>
        <li>完整STR数据的隐私性，相应的数据库不能公开共享。</li>
        <li>购买费用昂贵，且缺乏自主知识产权。</li>
        <li>不适应国内应用环境，难以大规模推广等。</li>
        &nbsp;&nbsp;导致该领域的大多数初学者和研究者还是需要手动输入数据，存在数据易错，研究效率低，以及数据存取不规范等问题，从而导致混合DNA图谱分析的步伐减慢，效率大大降低。因此，研究开发了STR数据库管理系统(STR
        database management
        system)简称STR-DBMS，旨在对庞大的混合DNA图谱信息进行系统化管理，为进一步研究混合DNA图谱提供便利，从而提高混合DNA图谱分析的效率；同时提供对外部人员的访问接口，方便本领域研究者的研究，最终实现整个研究过程的便捷化，系统化，智能化。<br />
      </div>
      <div class="card-list">
        <a-list
          :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
          :dataSource="dataSource"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <template v-if="item.add">
              <a-button class="new-btn" type="dashed">
                <a-icon type="plus" />新增产品
              </a-button>
            </template>
            <template v-else>
              <a-card :hoverable="true">
                <a-card-meta>
                  <div style="margin-bottom: 3px" slot="title">
                    {{ item.title }}
                  </div>
                  <a-avatar
                    class="card-avatar"
                    slot="avatar"
                    :src="item.avatar"
                    size="large"
                  />
                  <div class="meta-content" slot="description">
                    {{ item.content }}
                  </div>
                </a-card-meta>
                <!--  <a slot="actions">操作一</a>
                <a slot="actions">操作一</a> -->
              </a-card>
            </template>
          </a-list-item>
        </a-list>
      </div>
    </div>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import jichuxinxi from "@/assets/img/基础信息.png";
import dawenjiandaoru from "@/assets/img/19、大文件导入mysql模板.png";
import daorubiaodnacaozuo from "@/assets/img/导入表单-资料_操作_jurassic.png";
import shujujiansuo from "@/assets/img/数据检索.png";
import shujixiangqing from "@/assets/img/数据详情.png";
import APIjiekou from "@/assets/img/API接口.png";
import DNAfenxi from "@/assets/img/dna analysis.png";
export default {
  components: { PageLayout },
  name: "home",
  data() {
    return {
      extraImage:
        "https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png",
      dataSource: [
        {
          title: "基本信息",
          avatar: jichuxinxi,
          content: "包括组分数，采样类型，试剂盒类型，以及数据来源。",
        },
        {
          title: "数据详情",
          avatar: shujixiangqing,
          content:
            "包括每条数据的基因座，等位基因，峰面积，以及个体真实基因型。",
        },
        {
          title: "文件导入（csv，xlsx和图谱）",
          avatar: dawenjiandaoru,
          content: "按照示例文件的要求，对数据进行规范，批量导入。",
        },
        {
          title: "表单导入（csv，xlsx和图谱）",
          avatar: daorubiaodnacaozuo,
          content: "选择数据的基本信息，录入数据详情，提交导入。",
        },
        {
          title: "数据检索",
          avatar: shujujiansuo,
          content:
            "检索主要是通过基本信息进行筛选，得到所需数据的基本信息，详情等。删除是在数据展示的基本信息处可对数据进行删除操作。修改是在数据展示的基本信息和详情页都可进行删除操作。",
        },
        {
          title: "安全接口",
          avatar: APIjiekou,
          content: "设置安全接口，使得STR部分隐私数据对普通用户保密。 ",
        },
        {
          title: "混合DNA图谱分析",
          avatar: DNAfenxi,
          content:
            "将相应的算法嵌入该系统，用于拆分和验证，比如：MCMC算法，似然比检验等。该功能需要后续对系统不断的完善。",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.pageLayout {
  ::v-deep.content {
    width: calc(100% - 200px);
  }
}
/* .headerContent {
  flex-wrap: wrap;
  width: calc(100% - 200px);
} */
.header {
  display: block;
}
.extraImg {
  margin-top: -30px;
  text-align: center;
  width: 195px;
  img {
    width: 100%;
  }
}
.card-list {
  margin-top: 20px;
}
.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}
.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 187px;
}
.meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 64px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.textStyle {
  line-height: 26px;
  padding: 0 24px;
}
</style>